<template>
  <div class="person-root">
    <div class="title">人物详情</div>
    <NavBtns></NavBtns>
    <DescBlock class="block n1" :data="block1" :class="{hide: zoomin > 0}"></DescBlock>
    <TopicBlock class="block n2" 
      :class="{hide: zoomin > 0 && zoomin != 2, zoomin: zoomin == 2}"
      :zoomin="zoomin == 2" @zoomin="zoomin = 2" @zoomout="zoomin = 0">
    </TopicBlock>
    <GraphBlock class="block n3" 
      :class="{hide: zoomin > 0 && zoomin != 3, zoomin: zoomin == 3}"
      :zoomin="zoomin == 3" @zoomin="zoomin = 3" @zoomout="zoomin = 0">
    </GraphBlock>
  </div>
</template>

<script>
import DescBlock from './DescBlock'
import TopicBlock from './TopicBlock'
import GraphBlock from './GraphBlock'
import NavBtns from '../common/NavBtns'

export default {
  name: 'person',
  components: {DescBlock, TopicBlock, GraphBlock, NavBtns},
  data(){
    return {
      zoomin: 0,
      block1: {
        person: {
          name: "奥巴马",
          desc: "第一位非裔美国总统",
          img: "av0"
        },
        desc: [{
          label: '中文名',
          cont: '贝拉克·侯赛因·奥巴马'
        },{
          label: '外文名',
          cont: 'Barack Hussein Obama II'
        },{
          label: '别名',
          cont: '巴拉克·欧巴马'
        },{
          label: '国籍',
          cont: '美国'
        },{
          label: '民族',
          cont: '非裔美国人'
        },{
          label: '出生地',
          cont: '夏威夷州-檀香山'
        },{
          label: '出生日期',
          cont: '1961年8月4日'
        },{
          label: '职业',
          cont: '美国总统，律师'
        },{
          label: '毕业院校',
          cont: '哥伦比亚大学，哈佛大学'
        },{
          label: '信仰',
          cont: '基督新教'
        },{
          label: '主要成就',
          cont: `
            2008、2011年时代周刊年度风云人物 
            任期内清除本·拉登 
            第44任美国总统（第56~57届） 
            2009年诺贝尔和平奖获得者
          `
        },{
          label: '代表作品',
          cont: '《我相信变革》《我父亲的梦想》\n《无畏的希望》'
        },{
          label: '所属政党',
          cont: '美国民主党'
        },{
          label: '血型',
          cont: 'AB型'
        },{
          label: '身高',
          cont: '185cm'
        }]
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.block
  position absolute
  width 918px
  background rgba(0,0,0,.3)
  height 415px
  top 108px
  left 35px
  right 38.4px
  bottom 50px
  box-sizing border-box
  &.n1
    right auto
    bottom auto
  &.n2
    right auto
    top auto
  &.n3
    left auto
    height auto
  &.hide
    display none
  &.zoomin
    top 130px
    left 320px
    right 320px
    bottom 125px
    height auto
    width auto
</style>